<template>
  <section class="content content_gap">
    <div class="detail_title">
      排行
    </div>
    <div class="detail_update">
      最新数据截止至{{ (new Date()) | parseTime }} 23:59，按日更新
    </div>
    <div class="detail_tip">学校竣工后，将从排行榜前500名中抽取2位去现场共同见证</div>
    <div v-for="(item, index) in rankInfo" :key="index" class="rank-list">
      <div class="rank-item flex">
        <div class="rank-title">{{ item.rank }}</div>
        <img v-if="item.avatar" :src="item.avatar" width="30" height="30" class="user-image" />
        <img v-else src="../../assets/images/us_avatar.png" width="30" height="30" class="user-image" />
        <div class="user-name">{{ item.userName }}</div>
        <div class="rank-num">{{ tranform(item.donateAmount) }}</div>
        <img src="../../assets/images/bean.png" width="32" height="32" />
      </div>
    </div>
    <div class="rank-all view-honor" @click='onViewAllRank'>
      <span>查看全部</span>
      <i class="view-more"></i>
    </div>
  </section>
</template>

<script>
import { parseTime, countForShow } from '../../utils'

export default {
  props: {
    rankInfo: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  filters: {
    parseTime(val) {
      if (val) {
        let date = val.setDate(val.getDate() - 1)
        return parseTime(date, '{y}.{m}.{d}')
      }
      return val;
    },
  },

  methods: {
    onViewAllRank() {
      this.$router.push({
        name: 'allRank'
      })
    },
    tranform(count) {
      return countForShow(count);
    },
  },
}
</script>

<style lang="less" scoped>
.detail_update {
  font-family: PingFangSC-Regular;
  font-size: 21px;
  color: #727E89;
  margin-top: 15px;
}
.detail_tip {
  opacity: 0.5;
  font-family: PingFangSC-Regular;
  font-size: 21px;
  color: #727E89;
  margin-top: 9px;
}
.rank-item {
  color: #727E89;
  height: 75px;
  width: 100%;
  display: flex;
  align-items: center;
}
.rank-title {
  width: 50px;
  text-align: left;
  font-family: PingFangSC-Medium;
  font-size: 24px;
}
.user-image {
  border-radius: 50%;
  margin-right: 15px;
  height: 45px;
  width: 45px;
}
.user-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: PingFangSC-Regular;
  font-size: 21px;
  color: #727E89;
}
.rank-num  {
  margin-right: 10px;
  font-family: PingFangSC-Regular;
  font-size: 21px;
  color: #727E89;
  text-align: right;
}
.rank-all {
  margin-top: 45px;
  font-family: PingFangSC-Regular;
  font-size: 21px;
  color: #727E89;
  text-align: center;
  span {
    margin-right: 10px;
  }
}
.view-more {
  width: 10px;
  height: 16px;
  background: url(~@/assets/images/left_gray.png);
  background-size: cover;
  display: inline-block;
  vertical-align: middle;
}
</style>